<template>
  <li>
    <img src="" alt="" class="shu" />
    <div class="tou">
      <img src="../../public/images/keep/green.png" alt="" class="dui" />
      <span v-show="!boos.symbol.length">{{ boos.name.substr(-2, 2) }}</span>
      <img v-if="boos.symbol.length" :src="boos.symbol" alt="" />
    </div>
    <div class="you">
      <span>
        <h4>{{ boos.grade }}</h4>
        <h5>{{ boos.name }} (已同意)</h5>
      </span>
      <span>{{ boos.time }}</span>
      <div class="ming">签名: <img :src="boos.sign" alt="" /></div>
    </div>
  </li>
</template>

<script>
export default {
  name: "Process",
  props: ["boos"],
  data() {
    return {};
  },
};
</script>

<style scoped>
li {
  position: relative;
  display: inline-block;
  margin: 0.3vh 0;
  width: 100%;
  vertical-align: text-top;
  overflow: hidden;
}

li .shu {
  z-index: 1;
  position: absolute;
  height: 75%;
  margin-top: 5.5vh;
  left: 3.2vh;
  width: 0.6vw;
  background-color: #e2e4e3;
}

li .tou {
  display: inline-block;
  width: 5vh;
  height: 5vh;
  margin-left: 1vh;
  margin-bottom: 2.7vh;
  background-color: #3396fb;
  overflow: hidden;
  border-radius: 7px;
  text-align: center;
  line-height: 5vh;
}

li .tou .dui {
  position: absolute;
  left: 4.5vh;
  top: 3.3vh;
  width: 2vh;
  height: 2vh;
}

li .tou img {
  width: 100%;
}

li .tou span {
  font-size: 1.5vh;
  color: #f8f8f7;
}

li .you {
  display: inline-block;
  vertical-align: top;
  padding-left: 2.5vw;
}

li .you h1 {
  display: block;
  width: 70vw;
  height: 5vh;
  border-radius: 5px;
  font-weight: 400;
  font-size: 1.8vh;
  height: 5vh;
  line-height: 4.5vh;
  background-color: #f2f2f6;
  color: #6d6d6d;
  margin-bottom: 1vh;
}

.ming {
  position: relative;
  display: block;
  width: 20vh;
  height: 6vh;
  line-height: 6vh;
  margin-bottom: 3vh;
  color: #848b92;
  font-size: 1.6vh;
}
.ming img {
  position: absolute;
  width: 9vh;
  height: 5.3vh;
  line-height: 6vh;
  color: #848b92;
  font-size: 1.6vh;
}
li .you span:nth-of-type(2) {
  display: block;
  position: absolute;
  top: -0.2vh;
  right: 0vw;
  color: #b6b6b6;
  font-size: 1.6vh;
}

li .you span:nth-of-type(1) {
  width: 60vw;
  line-height: 2vh;
}

li .you span:nth-of-type(1) h4 {
  font-weight: 400;
}

li .you span:nth-of-type(1) h5 {
  display: inline-block;
  color: #000000;
  font-weight: 500;
  line-height: 4vh;
  font-size: 2vh;
}

li .you span:nth-of-type(1) h6 {
  display: inline-block;
  color: #6d8baa;
  font-weight: 400;
  padding-left: 1em;
}
</style>